﻿<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单滚轮老虎机抽奖</title>
<head>
</head>
<style type="text/css">

body, div{ margin:0; padding:0 }
body { margin: 0; font: 12px "微软雅黑"; background-color: #2D2D2D; }

body{width:100%;
}



.main{
    background: url("images/main0.gif") no-repeat center;
   background-size:100%;
    height: 568px;
	width:800px;
	margin:0 auto;
	position:relative;
}
.prize{
    position: absolute;
    top: 146px;
	left:164px;
    width: 465px;
    height: 174px;
	overflow:hidden;
}
.prize-show{
    position: relative;
    top:-522px;
}
.prize-img{
    background: url("images/num1.jpg") no-repeat;
    width: 465px;
    height: 1566px;
}

.btn{
    cursor: pointer;
    height: 70px;
    left: 305px;
    position: absolute;
    top: 410px;
    width: 200px;
}
</style>
<body>

<div class="main">
	<div class="prize">
		<div class="prize-show">
			<div class="prize-img"></div>
			<div class="prize-img"></div>
		</div>
	</div>
	<div class="btn"></div>
</div>
<script type="text/javascript">
	var btn = document.querySelector(".btn");
	btn.onclick=function () {
		if(!flag){
			flag=true;
			res();//定义滚动前的初始位置
			letItGo();//执行向上滚动
		}
	}
	var flag=false;
	var TextNum;
	var arr=[-1566,-1740,-1914,-522,-696,-870,-1044,-1218,-1392];
	var num=-522;
	var prize_show = document.querySelector(".prize-show");
	function letItGo(){
		TextNum=parseInt(Math.random()*9);//获取0~8之间的随机数
		num=arr[TextNum];//获取滚动结束时的位置
		var top = prize_show.offsetTop;
		var timer = setInterval(function(){
			top -= 2;
			prize_show.style.top = top + "px";
			if(top == -1566){
				clearInterval(timer);
				prize_show.style.top = 0;
				var top2 = prize_show.offsetTop;
				var timer2 = setInterval(function(){
					top2 -= 2;
					prize_show.style.top = top2 + "px";
					if(top2 == num){
						clearInterval(timer2);
						flag=false;
					}
				},2);
			}
		},2);
	}
	function res(){
		var resetPos=Math.abs(num)>=1566?(num+1566):num;
		prize_show.style.top = resetPos + "px";
	}
</script>
</body>
</html>